import React from "react";
// 导入轮播图组件
import { Carousel, Flex, Grid } from 'antd-mobile';
// 导入axios
import axios from "axios";
// 导入图片
// import Aci from '../../assets/image/aci.jpg'
// import Nace from "../assets/image/nav-1.png"
import './index.scss'

// 重构导航菜单
const Nav = [
    {
        id: 1,
        iconfont: 'icon-cangku',
        title: '整租',
        path: '/home/list'
    },
    {
        id: 1,
        iconfont: 'icon-Customermanagement',
        title: '合租',
        path: '/home/news'
    }, {
        id: 1,
        iconfont: 'icon-map',
        title: '地图找房',
        path: '/home/map'
    }, {
        id: 1,
        iconfont: 'icon-home-fill',
        title: '去出租',
        path: '/home/profile'
    },

]
// 获取地理位置信息
navigator.geolocation.getCurrentPosition(position => {
    console.log('当前位置信息', position)
})
// 密钥    3BFoxV8GTlE2HXcdtsNWWKpYt6ngBr0B

// 轮播图高度变了，不会自动播放
// 在状态中添加一个轮播图加载完成的数据


export default class Index extends React.Component {

    state = {
        // 图片的名称.
        data: ['1', '2', '3'],
        // 添加轮播图数据
        swipers: [],
        // swipers:
        // 获取租房小组数据
        groups: [],
        getFile: [
            { id: 1, desc: '归属的感觉', title: '家住回龙观', iconfont: 'icon-atm-fill' },
            { id: 2, desc: '大都市生活', title: '宜居四五环', iconfont: 'icon-smile' },
            { id: 3, desc: '繁华的背后', title: '喧器三里屯', iconfont: 'icon-home-fill' },
            { id: 4, desc: '地铁心连心', title: '相邻十号线', iconfont: 'icon-product' },
        ],
        // 最新资讯数据
        floot: [
            { id: 1, title: '置业选择|三室二厅 河间的古雅别院', desc: '二天前', add: '新华社', iconfont: 'icon-atm-fill' },
            { id: 1, title: '置业佳选|大理王宫 苍山洱海的古雅别院', desc: '二周前', add: '新华社', iconfont: 'icon-integral-fill' },
            { id: 1, title: '置业选择|安居小屋花园洋房清新别野', desc: '二月前', add: '新华社', iconfont: 'icon-cart-full-fill' },
        ],
        //   城市信息
        // curCityName:[]


    }
    // 获取租房数据的方法
    async getGroups() {
        const res = await axios.get('http://localhost:8080/home/groups', {
            params: {
                area: 'AREA%7C88Cff55c-aaa4-e2e0'
            }
        })
        console.log(res);
        this.setState({
            groups: res.data.body
        })
    }

    // 获取轮播图数据的 方法
    async getSwipers() {
        const res = await axios.get('http://localhost:8080/home/swiper')
        // 请求回数据重新赋值用this，setState
        this.setState({
            swipers: res.data.body
        })
        console.log('轮播图数据为', res)
        console.log("回来啦")
    }
    // 渲染轮播图结构
    renderSwiper() {
        return this.state.data.map(val => (
            <a
                key={val}
                href="http://www.alipay.com"
                style={{ display: 'inline-block', width: '100%', height: 212 }}
            >
                <img
                    src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}

                />
            </a>
        ))
    }
    // 渲染导航栏菜单方法
    renderNavs() {
        return Nav.map(item => <Flex.Item key={item.id} onClick={() => this.props.history.push(item.path)}><i className={`iconfont ${item.iconfont}`}></i>
            <h2>{item.title}</h2>
        </Flex.Item>)
    }
    // 渲染新闻资讯的方法
    renderFloot() {
        return this.state.floot.map((item) => {
            return <Flex key={item.id}>
                <Flex.Item><i className={`iconfont ${item.iconfont}`}></i></Flex.Item>
                <Flex.Item>
                    <div className="floot-d">
                        <div className="floot-w"><span>{item.title}</span>
                            <span></span>
                        </div>
                        <div className="floot-s">
                            <span className="spanc">{item.add}</span>
                            <span className="spane">{item.desc}</span>
                        </div>
                    </div>
                </Flex.Item>

            </Flex>
        })
    }
    // axios发送数据的方法都需要在这里调用
    componentDidMount() {
        this.getSwipers()
        this.getGroups()
        // 通过IP地址获取到当前城市名称
        // const curCity = new window.BMap.LocalCity()
        // curCity.get(async res => {
        //     console.log('当前城市信息', res)
        //     const result = await axios.get(`http://locationhost:8080/area/info?name=${res.name}`)
        //     this.setState({
        //         curCityName: result.data.body.label
        //     })

        // })
        // 轮播图数据
        setTimeout(() => {
            this.setState({
                data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
            });
        }, 100);
    }
    render() {
        return (
            <div>
                {/* 轮播图 */}
                <div className="swiper">
                    <Carousel
                        autoplay={true}
                        infinite
                    >
                        {this.renderSwiper()}
                    </Carousel>
                    <div className="seach">
                        <div className="seach-left">
                            <span onClick={() => { this.props.history.push('/citylist') }}>上海</span>
                            <input type="text" placeholder="请输入小区或者地址" onChange={() => { this.props.history.push('/search') }}></input>
                            <i className="iconfont icon-cart-full-fill"></i>
                        </div>
                        <div className="seach-right">
                            <i className="iconfont icon-map" onClick={() => { this.props.history.push('/map') }}></i>
                        </div>
                    </div>
                    {/* 搜索框 */}
                </div>
                {/* 导航栏 */}
                <Flex direction='row'>
                    {this.renderNavs()}
                </Flex>
                <div className="gouter">
                    {/* 租房小组 */}
                    <div className="group">
                        <h3 className="title">
                            租房小组 <span className="more">更多</span>
                        </h3>
                    </div>
                    {/* gord宫格 */}
                    <Grid data={this.state.getFile} hasLine={false} itemStyle={{ border: 0 }} columnNum={2} renderItem={(item) => (
                        <Flex className="group-item" justify="around" key={item.id}>
                            <div className="desc">
                                <p className="title">{item.title}</p>
                                <span className="info">{item.desc}</span>
                            </div>
                            <div>
                                <i className={`iconfont ${item.iconfont}`}></i>
                            </div>

                        </Flex>
                    )} />
                </div>
                {/* 最新资讯 */}
                <div className="floot">
                    <div className="zuixin">
                        <h3>最新资讯</h3>

                    </div>
                    {/* 渲染最新资讯 */}
                    {this.renderFloot()}
                </div>
            </div>
        )
    }
}